﻿<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1200"
        destroy-on-close
        :before-close="handleBeforeClose"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
            custom-class="details_class"
        >
            <el-row style="margin-bottom: 0px;display: block;">
                <div class="header_continar">
                    <div class="title">{{entityObj.materialName}}</div>
                    <div class="content">
                        <div style="display: flex;">
                            <div class="label">规格：</div>
                            <div class="value">{{entityObj.materialSpecs}}</div>
                        </div>
                        <div style="display: flex;margin: 0 48px;">
                            <div class="label">要货数量：</div>
                            <div class="value">{{entityObj.qty}}</div>
                        </div>
                        <div style="display: flex;">
                            <div class="label">单位：</div>
                            <div class="value">{{entityObj.unitName}}</div>
                        </div>
                    </div>
                </div>
                <div class="content_info">
                    <div class="label">已配供应商：</div>
                    <div class="value">
                        {{
                        getSupplierDesc(entityObj.purchases,entityObj.purchases[0].suppliers)
                        }}
                    </div>
                </div>
                <div class="content_info">
                    <div class="label">送赠库存:</div>
                    <div class="value">{{entityObj.giveStockDesc ? entityObj.giveStockDesc : "无"}}</div>
                </div>
                <div class="content_info">
                    <div class="label">促销活动:</div>
                    <div class="value">{{entityObj.activityDesc ? entityObj.activityDesc : "无"}}</div>
                </div>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-table
                        :data="entityObj.purchases"
                        :border="true"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                        class="subtable"
                    >
                        <el-table-column label="供应商" min-width="180" align="center">
                            <template #default="scope">
                                <el-select
                                    placeholder="---供应商---"
                                    v-model="scope.row.supplierId"
                                    style="width: 100%"
                                    @change="purchaseSupplierChanges(scope.row)"
                                >
                                    <el-option
                                        v-for="item in scope.row.suppliers"
                                        :key="item.orgId"
                                        :label="item.orgName"
                                        :value="item.orgId"
                                    />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="采购模式" min-width="160" align="center">
                            <template #default="scope">
                                <el-select
                                    placeholder="---采购模式---"
                                    v-model="scope.row.purchaseSaleType"
                                    style="width: 100%"
                                    @change="purchaseSaleTypeChanges(scope.row)"
                                >
                                    <el-option
                                        v-for="item in scope.row.suppliers.find(p=>p.orgId==scope.row.supplierId)?.purchaseSaleItems"
                                        :key="item.purchaseSaleType"
                                        :label="item.purchaseSaleTypeDesc"
                                        :value="item.purchaseSaleType"
                                    />
                                </el-select>
                            </template>
                        </el-table-column>
                        <el-table-column label="库存" min-width="60" align="center">
                            <template
                                #default="scope"
                            >{{scope.row.suppliers.find(p=>p.orgId==scope.row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==scope.row.purchaseSaleType)?.stockQty}}</template>
                        </el-table-column>
                        <el-table-column label="数量" min-width="170" align="center">
                            <template #default="scope">
                                <el-input-number
                                    v-model="scope.row.qty"
                                    :precision="0"
                                    :step="1"
                                    :disabled="false"
                                    style="width: 100%"
                                    @change="handleQuantityChange(scope.row)"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column
                            label="销售单价"
                            min-width="170"
                            prop="applyPrice"
                            align="center"
                        >
                            <template #default="scope">
                                <span
                                    v-if="scope.row.purchaseSaleType<20"
                                >{{scope.row.applyPrice=scope.row.suppliers.find(p=>p.orgId==scope.row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==scope.row.purchaseSaleType)?.applyPrice}}</span>
                                <el-input-number
                                    v-else
                                    v-model="scope.row.applyPrice"
                                    :precision="0"
                                    :step="1"
                                    :disabled="false"
                                    style="width: 100%"
                                />
                            </template>
                        </el-table-column>
                        <el-table-column label="采购单价" width="100" prop="price" align="center">
                            <template
                                #default="scope"
                            >{{scope.row.price=scope.row.suppliers.find(p=>p.orgId==scope.row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==scope.row.purchaseSaleType)?.price}}</template>
                        </el-table-column>
                        <el-table-column label="采购金额" width="100" align="center">
                            <template #default="scope">{{scope.row.qty*scope.row.price}}</template>
                        </el-table-column>
                        <el-table-column label="备注" min-width="160" align="center">
                            <template #default="scope">
                                <el-input v-model="scope.row.remarks" style="width: 100%" />
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" min-width="100" align="center">
                            <template #default="scope">
                                <el-button
                                    size="small"
                                    class="addbtnbg"
                                    v-if="scope.$index==0"
                                    @click="splitOrder(scope.row,scope.$index)"
                                >拆单</el-button>
                                <el-button
                                    size="small"
                                    class="addbtnbg"
                                    v-if="scope.$index>=1"
                                    @click="deleteRow(scope.row,scope.$index)"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-row style="margin-top: 20px;" class="font-16">
                <el-col>
                    <el-button @click="handleBeforeClose">取 消</el-button>
                    <el-button
                        v-if="mode != 'show'"
                        type="primary"
                        :loading="isSaveing"
                        @click="submit()"
                    >保 存</el-button>
                </el-col>
            </el-row>
        </template>
    </full-screen-dialog>
</template>

<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            orgType: 2,
            stepList: ["门店已下单", "接单处理中", "已完成"],
            active: 1,
            tableRowClassName: "warning-row",
            tableRowClassName1: "success-row",
            mode: "Add",
            titleMap: {
                Add: "拆单",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {},
            teamEntityObj: {},
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
            optionsPurchaseSaleType: [],
            suppliers: [],
        };
    },
    computed: {},
    methods: {
        handleBeforeClose() {
            this.$confirm("信息未保存,确定要关闭吗？", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.visible = false;
                })
                .catch(() => {
                    // 用户点击了取消按钮，不执行关闭
                });
        },
        submit() {
            this.$emit("saveOrder", this.entityObj);
            this.visible = false;
        },
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        deleteRow(data, index) {
            this.entityObj.purchases.splice(index, 1);
        },
        //表单注入数据
        async setData(data) {
            this.entityObj = structuredClone(data);
            console.log(this.entityObj)
        },
        //拆单
        async splitOrder(data) {
            this.$emit("splitOrder", this.entityObj);
        },
        //获取供应商信息
        getSupplierDesc(purchases,suppliers){
            const supplierTotals = suppliers.map(p=>{ 
                let totalQty =0;
                purchases.filter(t => t.supplierId == p.orgId).map((z) => totalQty+=z.qty);
                return {
                    name: p.orgName,
                    totalQty: totalQty
                };
            });
            console.log(supplierTotals)
            //排序
            const sortedSupplierTotals = supplierTotals.sort((a, b) => b.totalQty - a.totalQty);
            return sortedSupplierTotals
                .map(supplier => `${supplier.name}/${supplier.totalQty}`)
                .join(', ');
        },
        //供应商选中
        purchaseSupplierChanges(row){
            row.supplierOrgType=row.suppliers.find(p=>p.orgId==row.supplierId).orgType;
            row.supplierName= row.suppliers.find(p=>p.orgId==row.supplierId).orgName;
            row.optionsPurchaseSaleType=row.suppliers.find(p=>p.orgId==row.supplierId)?.purchaseSaleItems;
            row.purchaseSaleType= row.suppliers.find(p=>p.orgId==row.supplierId).purchaseSaleType;
            row.stockQty= row.suppliers.find(p=>p.orgId==row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==row.purchaseSaleType)?.stockQty;
            row.applyPrice=row.suppliers.find(p=>p.orgId==row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==row.purchaseSaleType)?.applyPrice;
            row.price=row.suppliers.find(p=>p.orgId==row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==row.purchaseSaleType)?.price;

            row.applyTotalAmount=row.applyPrice*row.qty;
            row.purchaseTotalAmount=row.price*row.qty;
            //网购
            if(row.purchaseSaleType==30){
                row.applyTotalAmount=0;
                row.purchaseTotalAmount=0;
            }
        },
        //采购模式选中
        purchaseSaleTypeChanges(row){
            row.stockQty= row.suppliers.find(p=>p.orgId==row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==row.purchaseSaleType)?.stockQty;
            row.applyPrice=row.suppliers.find(p=>p.orgId==row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==row.purchaseSaleType)?.applyPrice;
            row.price=row.suppliers.find(p=>p.orgId==row.supplierId)?.purchaseSaleItems?.find(p=>p.purchaseSaleType==row.purchaseSaleType)?.price;

            row.applyTotalAmount=row.applyPrice*row.qty;
            row.purchaseTotalAmount=row.price*row.qty;
            //网购
            if(row.purchaseSaleType==30){
                row.applyTotalAmount=0;
                row.purchaseTotalAmount=0;
            }
        },
        handleQuantityChange(row) {
            let totalQty = 0;
            this.entityObj.purchases.forEach((p) => (totalQty += p.qty));
            if (row.qty < 0) {
                this.$nextTick(() => {
                    row.qty = 0;
                });
                this.$message.error("采购数量不能小于0");
            }

            if (totalQty > this.entityObj.qty) {
                this.$nextTick(() => {
                    row.qty -= totalQty - this.entityObj.qty;
                });
                this.$message.error("采购数量不能大于要货数量");
            }
        },
    },
    async mounted() {},
};
</script>

<style  lang="scss" scoped>
.el-table .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
}
.el-form-item {
    margin-bottom: 8px !important;
}
.header_continar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 48px;
    background: #e5f1ff;
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 0 70px 0 20px;
    .title {
        font-weight: bold;
        font-size: 18px;
        color: #212121;
    }
    .content {
        display: flex;
        .label {
            font-weight: 400;
            font-size: 18px;
            color: #212121;
        }
        .value {
            font-weight: 400;
            font-size: 18px;
            color: #318cf2;
        }
    }
}
.content_info {
    padding-left: 20px;
    display: flex;
    margin-bottom: 10px;
    .label {
        font-weight: 400;
        font-size: 14px;
        color: #212121;
    }
    .value {
        font-weight: 400;
        font-size: 14px;
        color: #318cf2;
    }
}
::v-deep(.subtable .el-table__row) {
    background: #f2f2f2 !important;
}

.addbtnbg {
    width: 80px;
    height: 28px;
    background: none;
    border-radius: 4px;
    border: none;
    font-size: 14px;
    color: #318cf2;
}

::v-deep .el-scrollbar {
    padding-bottom: 10px !important;
    background: #f2f2f2 !important;
}
</style>
<style>
.el-dialog__body {
    padding-top: 20px !important;
    padding-bottom: 0px !important;
}
.el-dialog__header {
    font-size: 20px;
}
</style>
